<template>
	<page-layout class="page">
		<pure-gap size="12px"></pure-gap>

		<view class="pj-padding-sides">
			<!-- 基础使用 -->
			<pj-demo
				title="基础使用"
				desc="请选择您的爱好"
			>
				<pure-checkbox-group v-model="hobbyChecked">
					<pure-checkbox
						v-for="item in hobby"
						:key="item.value"
						:label="item.label"
						:value="item.value"
					></pure-checkbox>
				</pure-checkbox-group>
			</pj-demo>

			<!-- 主题 -->
			<pj-demo
				title="主题"
				desc="请选择您的爱好"
			>
				<pure-checkbox-group v-model="hobbyChecked">
					<pure-checkbox
						v-for="item in hobby"
						:key="item.value"
						:label="item.label"
						:value="item.value"
						:theme="item.theme"
					></pure-checkbox>
				</pure-checkbox-group>
			</pj-demo>

			<!-- 幽灵样式 -->
			<pj-demo
				title="幽灵样式"
				desc="请选择您的爱好"
			>
				<pure-checkbox-group v-model="hobbyChecked">
					<pure-checkbox
						v-for="item in hobby"
						:key="item.value"
						:label="item.label"
						:value="item.value"
						:theme="item.theme"
						ghost
					></pure-checkbox>
				</pure-checkbox-group>
			</pj-demo>

			<!-- 镂空样式 -->
			<pj-demo
				title="镂空样式"
				desc="请选择您的爱好"
			>
				<pure-checkbox-group v-model="hobbyChecked">
					<pure-checkbox
						v-for="item in hobby"
						:key="item.value"
						:label="item.label"
						:value="item.value"
						:theme="item.theme"
						plain
					></pure-checkbox>
				</pure-checkbox-group>
			</pj-demo>

			<!-- 圆形框 -->
			<pj-demo
				title="圆形框"
				desc="请选择您的爱好"
			>
				<pure-checkbox-group v-model="hobbyChecked">
					<pure-checkbox
						v-for="item in hobby"
						:key="item.value"
						:label="item.label"
						:value="item.value"
						:theme="item.theme"
						circle
					></pure-checkbox>
				</pure-checkbox-group>
			</pj-demo>

			<!-- 禁用状态 -->
			<pj-demo
				title="禁用状态"
				desc="请选择您的爱好"
			>
				<pure-checkbox-group v-model="hobbyChecked">
					<pure-checkbox
						v-for="item in hobby"
						:key="item.value"
						:label="item.label"
						:value="item.value"
						:theme="item.theme"
						disabled
					></pure-checkbox>
				</pure-checkbox-group>
			</pj-demo>

			<!-- 只读状态 -->
			<pj-demo
				title="只读状态"
				desc="请选择您的爱好"
			>
				<pure-checkbox-group v-model="hobbyChecked">
					<pure-checkbox
						v-for="item in hobby"
						:key="item.value"
						:label="item.label"
						:value="item.value"
						:theme="item.theme"
						readonly
					></pure-checkbox>
				</pure-checkbox-group>
			</pj-demo>

			<!-- 自定义颜色 -->
			<pj-demo
				title="自定义颜色"
				desc="请选择您的爱好"
			>
				<pure-checkbox-group v-model="hobbyChecked">
					<pure-checkbox
						v-for="item in hobby"
						:key="item.value"
						:label="item.label"
						:value="item.value"
						:theme="item.theme"
						:activeColor="item.activeColor"
					></pure-checkbox>
				</pure-checkbox-group>
				<pure-checkbox-group v-model="hobbyChecked">
					<pure-checkbox
						v-for="item in hobby"
						:key="item.value"
						:label="item.label"
						:value="item.value"
						:theme="item.theme"
						:activeColor="item.activeColor"
						ghost
					></pure-checkbox>
				</pure-checkbox-group>
				<pure-checkbox-group v-model="hobbyChecked">
					<pure-checkbox
						v-for="item in hobby"
						:key="item.value"
						:label="item.label"
						:value="item.value"
						:theme="item.theme"
						:activeColor="item.activeColor"
						plain
					></pure-checkbox>
				</pure-checkbox-group>
			</pj-demo>

			<!-- 单独使用 -->
			<pj-demo title="单独使用">
				<pure-checkbox
					v-model="isChecked"
					alone
					theme="danger"
				>
					<view class="content">
						已阅读并同意
						<pure-link
							class="link"
							underline
							theme="danger"
							>《隐私政策》</pure-link
						>
						和
						<pure-link
							class="link"
							underline
							theme="danger"
							>《用户协议》</pure-link
						>
					</view>
				</pure-checkbox>
			</pj-demo>

			<!-- 独占一行 -->
			<pj-demo
				title="独占一行"
				desc="请选择您的爱好"
			>
				<pure-checkbox-group
					v-model="hobbyChecked"
					block
				>
					<pure-checkbox
						v-for="item in hobby"
						:key="item.value"
						:label="item.label"
						:value="item.value"
						:theme="item.theme"
					></pure-checkbox>
				</pure-checkbox-group>
			</pj-demo>

			<!-- 标签在前 -->
			<pj-demo
				title="标签在前"
				desc="请选择您的爱好"
			>
				<pure-checkbox-group
					v-model="hobbyChecked"
					block
				>
					<pure-checkbox
						v-for="item in hobby"
						:key="item.value"
						:label="item.label"
						:value="item.value"
						:theme="item.theme"
						reverse
					></pure-checkbox>
				</pure-checkbox-group>
			</pj-demo>
		</view>

		<pure-gap size="12px"></pure-gap>
	</page-layout>
</template>

<script setup>
	import { ref } from "vue";

	// 爱好
	const hobby = ref([
		{ label: "跑步", value: "1", theme: "primary", activeColor: "#ff0000" },
		{ label: "足球", value: "2", theme: "success", activeColor: "#ff0099" },
		{ label: "篮球", value: "3", theme: "warning", activeColor: "#ff9900" },
		{ label: "网球", value: "4", theme: "danger", activeColor: "#00ff99" },
		{ label: "游泳", value: "5", theme: "info", activeColor: "#0099ff" }
	]);
	const hobbyChecked = ref(["1", "2", "3", "4", "5"]);
	const isChecked = ref(false);
</script>

<style lang="scss" scoped>
	.page {
		--pj-checkbox-theme-1: #e94c1c;

		.content {
			display: flex;
		}
	}
</style>
